<html>
  <head>
    <meta charset="utf-8">
    <title>Action Sheets</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
  </head>
  <body>

    <section>

      <header class="bar bar-header bar-dark">
        <h1 class="title">Action Sheets</h1>
      </header>

      <main class="content has-header">
        <div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padding">
          <a href="#" class="button button-warning" id="modal-opener">Open Sheet</a>
          <p><a class="button button-secondary" href="index.html">Homepage</a></p>
        </div>
      </main>

    </section>

    <div id="sheet" class="action-sheet slide-in-up">
      <div class="action-sheet-group">
        <div class="action-sheet-title" ng-if="titleText">Do you like ice cream?</div>
        <button class="button">Tweet</button>
        <button class="button">Email</button>
      </div>
      <div class="action-sheet-group" ng-if="destructiveText">
        <button class="button destructive">Delete photos</button>
      </div>
      <div class="action-sheet-group" ng-if="cancelText">
        <button class="button" ng-click="cancel()">Cancel</button>
      </div>
    </div>

    <script src="../../dist/js/ionic.bundle.js"></script>
    <script>
      var open = document.getElementById('modal-opener');

      var sDiv = document.getElementById('sheet');
      var sheet = new ionic.views.ActionSheet({el: sDiv});

      ionic.on('tap', function(e) {
        sheet.show();
        /*
        ActionSheet.show({
          buttons: [
            { text: 'Option 1' },
            { text: 'Option 2' },
            { text: 'Option 3' },
          ],
          destructiveText: 'Delete life',
          titleText: 'Are you sure about life?',
          cancelText: 'Cancel',
          cancel: function() {
            console.log('CANCELLED');
          },
          buttonClicked: function(index) {
            console.log('BUTTON CLICKED', index);
            return true;
          },
          destructiveButtonClicked: function() {
            return true;
          }
        });
        */

        return false;
      }, open);
    </script>
    
  </body>
</html>
